/*
 * @Author: yuki
 * @Date: 2025-11-02 17:46:53
 * @LastEditTime: 2025-11-04 14:21:57
 * @Description: 主题配置
 */
import type { ReactNode } from 'react';
import { createContext, useContext, useState, useEffect } from 'react';
import { ConfigProvider } from 'antd';
import type { ThemeConfig } from 'antd';

import type { ThemeType, IThemeContext } from './types';
import { ThemeEnum } from './types';

const ThemeContext = createContext<IThemeContext | undefined>(undefined);

// 主题颜色配置
const themeColors = {
  [ThemeEnum.DEFAULT]: {
    primary: '#6366f1',
    secondary: '#8b5cf6',
    accent: '#06b6d4',
    background: '#fefefe',
    surface: '#f8fafc',
    text: '#1e293b'
  },
  [ThemeEnum.ANALYST]: {
    primary: '#3b82f6',
    secondary: '#1d4ed8',
    accent: '#0ea5e9',
    background: '#f0f9ff',
    surface: '#e0f2fe',
    text: '#1e3a8a'
  },
  [ThemeEnum.DIPLOMAT]: {
    primary: '#10b981',
    secondary: '#059669',
    accent: '#34d399',
    background: '#f0fdf4',
    surface: '#dcfce7',
    text: '#064e3b'
  },
  [ThemeEnum.SENTINEL]: {
    primary: '#f59e0b',
    secondary: '#d97706',
    accent: '#fbbf24',
    background: '#fffbeb',
    surface: '#fef3c7',
    text: '#92400e'
  },
  [ThemeEnum.EXPLORER]: {
    primary: '#8b5cf6',
    secondary: '#7c3aed',
    accent: '#a78bfa',
    background: '#faf5ff',
    surface: '#f3e8ff',
    text: '#581c87'
  }
};

// 主题提供者组件
export default function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<ThemeType>(ThemeEnum.DEFAULT);
  const [antdTheme, setAntdTheme] = useState<ThemeConfig>({});

  // 初始化时从localStorage加载主题
  useEffect(() => {
    const savedTheme = localStorage.getItem('fortune-theme') as ThemeType;
    if (savedTheme && themeColors[savedTheme]) {
      setTheme(savedTheme);
    } else {
      // 如果没有保存的主题或主题不存在，使用默认主题
      setTheme('default');
    }
  }, []);

  // 主题变化时更新CSS变量和localStorage，以及Ant Design主题
  useEffect(() => {
    // 保存主题到localStorage
    localStorage.setItem('fortune-theme', theme);

    // 应用CSS变量到根元素
    const colors = themeColors[theme];
    const root = document.documentElement;
    root.style.setProperty('--color-primary', colors.primary);
    root.style.setProperty('--color-secondary', colors.secondary);
    root.style.setProperty('--color-accent', colors.accent);
    root.style.setProperty('--color-background', colors.background);
    root.style.setProperty('--color-surface', colors.surface);
    root.style.setProperty('--color-text', colors.text);

    // 配置Ant Design主题
    const newAntdTheme: ThemeConfig = {
      token: {
        colorPrimary: colors.primary,
        colorPrimaryBg: colors.background,
        colorPrimaryText: colors.text,
        colorBgBase: colors.background,
        colorTextBase: colors.text
      }
    };

    setAntdTheme(newAntdTheme);
  }, [theme]);

  // 获取当前主题颜色的方法
  const getThemeColors = () => themeColors[theme];

  return (
    <ThemeContext.Provider value={{ theme, setTheme, getThemeColors }}>
      <ConfigProvider theme={antdTheme}>{children}</ConfigProvider>
    </ThemeContext.Provider>
  );
}

// 自定义Hook，方便使用主题
export function useTheme() {
  const context = useContext(ThemeContext);
  return context;
}
